<template>
  <f7-page>
    <f7-navbar title="添加收款方式" back-link="返回"></f7-navbar>

    <div class="form-box">
      <custom-input type="select" label="收款方式" :select="collectionTypes" v-model="formItems.bank_id" @change="handleTypeChange"></custom-input>
      <custom-input :label="isAlipay?'支付宝昵称':'持卡人姓名'" :placeholder="`请输入${isAlipay?'昵称':'持卡人姓名'}`" v-model="formItems.username"></custom-input>
      <custom-input :label="isAlipay?'支付宝账号':'账号'" :placeholder="`请输入${isAlipay?'账号':'银行卡号'}`" v-model="formItems.bankcard"></custom-input>
      <custom-input v-if="isAlipay" type="file" label="收款二维码" placeholder="请上传收款二维码" :value="formItems.image" @change="handleUpload"></custom-input>
      <custom-input v-else label="开户行" placeholder="请输入开户行" v-model="formItems.bank"></custom-input>
      <custom-input label="设为默认">
        <f7-list>
          <f7-list-item title="是">
            <f7-toggle color="black" slot="after" :checked="formItems.status" @toggle:change="formItems.status = $event"></f7-toggle>
          </f7-list-item>
        </f7-list>
      </custom-input>

      <f7-button fill @click="handleAdd">确定</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { getBankList, addBank, getBankDetails, updateBank } from "../api/my";
  import { upLoadImages } from "../api";

  export default {
    name: "add-pay-type",
    data:function() {
      return {
        collectionTypes: [/*
          {
            name: '中国农业银行',
            id: '1'
          },
          {
            name: '支付宝',
            id: '2'
          },
          {
            name: '微信',
            id: '3'
          }
        */],
        formItems: {
          type: '1', // 收款方式,1支付宝2银行卡
          bank_id: '', // 收款方式id
          username: '', // 用户名
          bankcard: '', // 账号
          image: '', // 支付宝二维码
          bank: '', // 支行地址
          status: false, // 1默认0否
        }
      }
    },
    computed: {
      isAlipay() {
        return this.formItems.type !== '2';
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      getBankDetails() {
        this.$toast.loading('加载中');
        getBankDetails({id: this.$f7route.query.id}).then(res => {
          let obj = res.data;
          obj.status = obj.status === '1';
          // console.log(obj);
          for(let key in this.formItems) {
            this.formItems[key] = obj[key]
          }
          this.$toast.clear();
        })
      },

      init() {
        getBankList().then(res => {
          this.collectionTypes = res.data;
          this.formItems.bank_id = res.data[0].id;
          if (this.$f7route.query.id) {
            this.getBankDetails();
          }
        })
      },
      handleTypeChange(id) {
        console.log(id);
        this.formItems.type = id === '16'?'1':'2'
      },
      handleUpload(url) {
        upLoadImages({image: url}).then(res => {
          console.log(res);
          this.formItems.image = res.url.url;
        })
      },
      handleAdd() {
        let obj = {...this.formItems};
        obj.status = obj.status?'1':'0';
        obj.type = this.isAlipay?'1':'2';
        console.log(obj);
        if (!this.$f7route.query.id) {
          addBank(obj).then(() => {
            this.$f7router.back();
          })
        } else {
          obj['id'] = this.$f7route.query.id;
          updateBank(obj).then(() => this.$f7router.back())
        }

      }
    }
  }
</script>

<style scoped lang="scss">
  .form-box {
    padding: $padding;
    .button {
      margin-top: 80px;
    }
  }
</style>